<template>
  <div class="address-page">
      手动选择位置
      <md-search-location @onSearch="setLocation" />
      <button class="geolocation-btn" @click="geolocation">定位到当前地址</button>
      <md-popup title="选择地址" :visibility="visibility" @close="visibility=false">
          <div class="locatin-list">
              <ul>
                  <li>asdasd</li>
                  <li>asdasd</li>
                  <li>asdasd</li>
                  <li>asdasd</li>
                  <li>asdasd</li>
              </ul>
          </div>
      </md-popup>
      <md-button type="primary" :round="false" class="add-address-btn" @click="$router.push('/edit/address')">添加地址</md-button>
  </div> 
</template>

<script>
import map from '@/utils/map'
export default {
    name:'Address',
    data() {
        return {
            visibility:false
        }
    },
    methods: {
        setLocation(location){
            this.$store.commit('user/SET_LOCATION',location)
            this.$router.replace('/home')
        },
        geolocation(){
            map.geolocation().then((res)=>{
                console.log('成功')
                this.visibility=true
            }).catch(()=>{
                console.log('失败')
                this.visibility=true
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.address-page{
    .geolocation-btn{
       @include wh(100%,80px); 
    }
    .add-address-btn{
        position: absolute;
        bottom: 0;
    }
}
</style>